<template>
  <div class="new-home-page">
    <!--权限弹框 已开发模块-->
    <el-dialog class="perssionDialog"
               :visible.sync="perssionDialog"
               width="500px"
               center>
      <el-row class="perssionDialogInfo">
        <el-col :span="12" style="height:200px;">
          <img src="../../../static/img/PerssionImg.png" alt="">
        </el-col>
        <div class="perssionCont">
          <div class="title">{{$t('Searchlight.perssionDialog.authorization.title')}}</div>
          <div class="cont">{{$t('Searchlight.perssionDialog.authorization.subTitle')}}</div>
          <router-link to='/guide' class="perssion-link">{{EXPLORE_LINK}}</router-link>
        </div>
      </el-row>
    </el-dialog>
    <!--权限弹框 Searchlight入口-->
    <el-dialog class="perssionDialog"
               :visible.sync="searchlightDialog"
               width="500px"
               center>
      <el-row class="perssionDialogInfo">
        <el-col :span="12" style="height:200px;">
          <img src="../../../static/img/SearchlightImg.png" alt="">
        </el-col>
        <div class="perssionCont">
          <div class="title">Account Authorization</div>
          <div class="cont">Perssion For Searchlight</div>
          <div class="perssion-link">PIs contact wangsheng1@lenovo.com</div>
        </div>
      </el-row>
    </el-dialog>
    <!--权限弹框 建设中-->
    <el-dialog class="perssionDialog constructionDialog"
               :visible.sync="constructionDialog"
               width="500px"
               center>
      <div class="perssionDialogInfo" style="padding:20px 0 34px; text-align: center;">
        <div class="title" style="color:#333;margin-bottom: 30px;">{{$t('Searchlight.perssionDialog.construction')}}</div>
        <img src="../../../static/img/ConstructionImg.png" alt="">
      </div>
    </el-dialog>
    <div class="hp-top">
      <el-row :gutter="20">
        <el-col :span="10">
          <div class="grid-content">
            <h2>{{$t('Searchlight.InfoRetrieval.title')}}</h2>
            <el-row :gutter="20">
              <el-col :span="14">
                <p @click="jumpPageToInfoRetrieval">{{$t('Searchlight.InfoRetrieval.cont')}}</p>
              </el-col>
              <el-col :span="8" :offset="2">
                <p class="perssion-link" @click.stop="showPerssionInnerSystem(item.link)"
                   v-for="item in $t('Searchlight.InfoRetrieval.links')" :key="item.link">{{item.link}}</p>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content">
            <h2 @click="showPerssionOuterSystem" style="cursor: pointer;">{{$t('Searchlight.searchlight.title')}}</h2>
            <el-row :gutter="20">
              <el-col :span="17">
                <p style="cursor: default;">
                  {{$t('Searchlight.searchlight.cont')}}
                </p>
              </el-col>
              <el-col :span="6" :offset="1">
                <p class="perssion-link" @click="showPerssionOuterSystem">{{$t('Searchlight.searchlight.entrance')}}</p>
                <!--<p class="perssion-link" @click="showConstructionDialog">{{$t('Searchlight.searchlight.entrance')}}</p>-->
                <p class="perssion-link">
                  <a :href="`../../../static/doc/${href}.docx`" :download="download">{{$t('Searchlight.searchlight.UserManual')}}</a>
                </p>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content dashboard" @click="showPerssionDashbord('Dashboard')" style="cursor: pointer;">
            <h1>{{$t('Searchlight.Dashboard.title')}}</h1>
            <span></span>
            <div>{{$t('Searchlight.Dashboard.btn')}}</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="hp-content">
      <el-row :gutter="20">
        <el-col :span="18">
          <div class="grid-content">
            <el-row :gutter="20">
              <el-col :span="6">
                <h2>{{$t('Searchlight.CustomerManagement.title')}}</h2>
                <p style="cursor: pointer;" @click="jumpPageToCustomerInsight">{{$t('Searchlight.CustomerManagement.cont')}}</p>
              </el-col>
              <el-col :span="7" :offset="1">
                <h4>{{$t('Searchlight.CustomerManagement.column1.title')}}</h4>
                <p class="perssion-link unLink"
                   @click.stop="showConstructionDialog"
                   v-for="item in $t('Searchlight.CustomerManagement.column1.links')" :key="item.link">{{item.link}}</p>
                <h4>{{$t('Searchlight.CustomerManagement.column3.title')}}</h4>
                <p class="perssion-link unLink"
                   @click.stop="showConstructionDialog1(item.link)"
                   v-for="item in $t('Searchlight.CustomerManagement.column3.links')" :key="item.link">{{item.link}}</p>
              </el-col>
              <el-col :span="10">
                <h4>{{$t('Searchlight.CustomerManagement.column2.title')}}</h4>
                <p class="perssion-link"
                   @click.stop="jumpPageToCustomerInsightChild(item.link)"
                   v-for="item in $t('Searchlight.CustomerManagement.column2.links')" :key="item.link">{{item.link}}</p>
              </el-col>
            </el-row>
          </div>
          <div class="grid-content" style="margin-top: 20px;height:350px;">
            <el-row :gutter="20">
              <el-col :span="6">
                <h2>{{$t('Searchlight.BussinessInsight.title')}}</h2>
                <p @click="jumpPageToBussinessInsight">{{$t('Searchlight.BussinessInsight.cont')}}</p>
              </el-col>
              <el-col :span="7" :offset="1">
                <h4>{{$t('Searchlight.BussinessInsight.column1.title')}}</h4>
                <p class="perssion-link unLink"
                   @click.stop="showConstructionDialog1(item.link)"
                   v-for="item in $t('Searchlight.BussinessInsight.column1.links')" :key="item.link">{{item.link}}</p>
                <h4>{{$t('Searchlight.BussinessInsight.column3.title')}}</h4>
                <p class="perssion-link unLink"
                   @click.stop="showConstructionDialog"
                   v-for="item in $t('Searchlight.BussinessInsight.column3.links')" :key="item.link">{{item.link}}</p>
              </el-col>
              <el-col :span="10">
                <h4>{{$t('Searchlight.BussinessInsight.column2.title')}}</h4>
                <p class="perssion-link unLink"
                   @click.stop="showConstructionDialog2(item.link)"
                   v-for="item in $t('Searchlight.BussinessInsight.column2.links')" :key="item.link">{{item.link}}</p>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content div2"  @click="jumpPageToAiInCBI">
            <h1>{{$t('Searchlight.AiInCBI.title')}}</h1>
            <span>{{$t('Searchlight.AiInCBI.cont')}}</span>
            <div>{{$t('Searchlight.AiInCBI.btn')}}</div>
          </div>
          <div class="grid-content div3">
            <h2 @click="jumpPageToDataTools" style="cursor: pointer;">{{$t('Searchlight.DataTools.title')}}</h2>
            <p class="perssion-link" @click.stop="jumpPageToDataToolsChild('GroupUpdate')">{{$t('route.GroupUpdate')}}</p>
            <p class="perssion-link" @click.stop="jumpPageToDataToolsChild('ServiceStatusUpdate')">{{$t('route.ServiceStatusUpdate')}}</p>
            <p class="perssion-link">
              <a href="../../../static/doc/CBI User manual V1.0_Service status update.docx">{{$t('Searchlight.searchlight.UserManual')}}</a>
            </p>
            <h2 @click="jumpPageToDataInfo" style="cursor: pointer;">{{$t('Searchlight.DataInfo.title')}}</h2>
            <p class="perssion-link" @click.stop="jumpPageToDataInfoChild('DataSource')">{{$t('route.DataSource')}}</p>
            <p class="perssion-link" @click.stop="jumpPageToDataInfoChild('DataDictionary')">{{$t('route.DataDictionary')}}</p>
            <h2>{{$t('Searchlight.Reference.title')}}</h2>
            <!--<p class="perssion-link"><a href="#/CBIAPI/index">{{$t('Searchlight.Reference.link1')}}</a></p>-->
            <!--<p class="perssion-link" @click="jumpPageToReference('Fortune500Info')">{{$t('Searchlight.Reference.link2')}}</p>-->
            <p class="perssion-link" @click="jumpPageToReference('AboutUs')">{{$t('Searchlight.Reference.link3')}}</p>
            <p class="perssion-link" @click="jumpPageToReference('FAQ')">{{$t('Searchlight.Reference.link4')}}</p>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  $height: 280px;
  .new-home-page {
    padding: 20px;
    overflow: hidden;
    h2{
     font-family: OpenSansShin;
      color:#ff5b00;
      font-size:20px;
      line-height:24px;
      /*font-face: HelveticaNeue-CondensedBold;*/
      cursor:default;
    }
    h4{
     font-family: OpenSansShin;
      color:#4dcfa3;
      font-size:18px;
      line-height:22px;
      /*white-space: nowrap;*/
      /*overflow:hidden;*/
      /*text-overflow:ellipsis;*/
      cursor:default;
    }
    .perssion-link{
      color:#7c8694;
      font-size:14px;
      line-height:20px;
      margin-bottom: 20px;
      text-decoration: underline;
    }
    .perssion-link:hover{
      cursor: pointer;
    }
    .hp-top {
      h1, h2, h3, h4, ul, li {
        margin: 0;
        padding: 0;
      }
      li {
        list-style: none;
      }
      .grid-content {
        /*height: 30vh;*/
        height: $height;
        padding: 20px 30px;
        background:#fff;
        border: 1px solid #e6ebf5;
        box-shadow: 0 2px 10px 0 rgba(226,224,234,.6);
        p {
          color: #7c8694;
          font-size: 14px;
          /*font-face: HelveticaNeue;*/
          /*line-height: 20px;*/
          line-height: 24px;
          cursor:pointer;
        }
      }
      .dashboard {
       font-family: OpenSansShin;
        /*background-color: #ff5800;*/
        background: url("./images/orange.png") no-repeat;
        background-size: cover;
        color: #fff;
        text-align: center;
        h1 {
          /*margin: 4vh 0 2vh 0;*/
          margin: 50px 0 20px 0;
        }
        span {
          display: inline-block;
          width: 20%;
          height: 4px;
          background-color: #fff;
          margin-bottom: 3vh;
        }
        div {
          width: 80%;
          margin: 0 auto;
          border: 2px solid #fff;
          padding: 15px;
        }
      }
    }
    .hp-content {
      margin-top: 20px;
      .grid-content {
        padding: 20px 30px;
        background: #fff;
        cursor: pointer;
        border: 1px solid #e6ebf5;
        box-shadow: 0 2px 10px 0 rgba(226,224,234,.6);
        p {
          color: #7c8694;
          font-size: 14px;
          /*font-face: HelveticaNeue;*/
          /*line-height: 20px;*/
          line-height: 24px;
        }
      }
      .div2 {
       font-family: OpenSansShin;
        /*background-color: #231f20;*/
        background: url("./images/black.png") no-repeat;
        background-size: cover;
        height: $height;
        text-align: center;
        color: #fff;
        span {
          display: inline-block;
          margin-bottom: 3vh;
          font-size: 16px;
        }
        div {
          width: 90%;
          margin: 0 auto;
          border: 2px solid #fff;
          padding: 15px;
          font-size: 16px;
        }
        h1 {
          color: #ffce64;
          margin: 40px 0 20px 0;
        }
      }
      .div3 {
        margin-top: 20px;
        /*height: 58vh;*/
        height:495px;
      }
      .unLink{
        text-decoration:none ;
      }
    }
    .perssionDialog{
      .perssionDialogInfo{
        .title{
          font-size:20px;
          font-weight:bold;
        }
        .dialogImg{
          position:relative;
          height:200px;
          background-size:cover;
        }
        .perssionCont{
          color:#333;
          position:absolute;
          /*right:25px;*/
          right:-15px;
          /*top:50%;*/
          top:25%;
          transform: translateY(-50%);
          .title{
            color:#333;
          }
          .cont{
            margin-right:4px;
            font-size:12px;
            color:#333;
          }
          .perssion-link{
            font-size:12px;
            color:#0090e9;
            display:inline-block;
            /*border-bottom:2px solid #0090e9;*/
          }
        }
      }
    }
  }
</style>

<script>
  import { mapGetters } from 'vuex'
  import {getUsername} from '../../utils/auth'
  import { removeToken} from '@/utils/auth'
  export default {
    name: "Searchlight",
    data() {
      return {
        EXPLORE_LINK:process.env.EXPLORE_LINK+'?permanent#/guide',
        testPort: '', //测试Ip
        searchlightPort: 'https://powerquester.lenovo.com/sso/index?', //searchlight Ip
        timer: '',
        perssionDialog: false,
        searchlightDialog: false,
        constructionDialog: false,
        href: '',
        download: '',
        hrefEN: 'PowerQuesterEN',
        hrefZH: 'PowerQuesterZH',
        downloadEN: 'Power Quester User Manual',
        downloadZH: 'Power Quester 用户手册'
      }
    },
    methods: {
      downloadPowerQuester(){
        if(this.language === 'en'){
          this.href = this.hrefEN
          this.download = this.downloadEN
        }else if (this.language === 'zh') {
          this.href = this.hrefZH
          this.download = this.downloadZH
        }
      },
      jumpPageToInfoRetrieval(){
        this.$router.push({path: '/InfoRetrievalIntroduction/index'})
      },
      jumpPageToCustomerInsight(){
        this.$router.push({path: '/CustomerInsightIntroduction/index'})
      },
      jumpPageToAiInCBI(){
        this.$router.push({path: '/Reference/AIinCBI'})
      },
      jumpPageToDataInfo(){
        this.$router.push({path: '/DataInfoIntroduction/index'})
      },
      jumpPageToDataTools(){
        this.$router.push({path: '/DataToolsIntroduction/index'})
      },
      jumpPageToCustomerInsightChild(item){
        let getUserMenus = sessionStorage.getItem('userMenus')
        if(getUserMenus == null||getUserMenus == 'undefined'){
          this.$router.push({path: '/login'})
        }else {
          let userMenus = JSON.parse(getUserMenus)
          let activeMenus = item.replace(/\s/ig, '')
          if (activeMenus === '客户忠诚度') {
            activeMenus = 'CustomerLoyalty'
          }
          if (activeMenus === '客户贡献') {
            activeMenus = 'CustomerContribution'
          }
          if (activeMenus === 'Top客户') {
            activeMenus = 'TopCustomer'
          }
          if (activeMenus === '客户排名') {
            activeMenus = 'CustomerRanking'
          }
          if (activeMenus === '客户调研') {
            activeMenus = 'CustomerSurvey'
          }
          if (userMenus.length !== 0) {
            if (userMenus.indexOf(activeMenus) !== -1 || userMenus[0].toLowerCase() === 'all') {
              this.$router.push({path: `/CustomerInsight/${activeMenus}`})
            } else {
              this.perssionDialog = true
            }
          } else {
            this.perssionDialog = true
          }
        }
      },
      jumpPageToBussinessInsight(){
        this.$router.push({path: '/BusinessInsightIntroduction/index'})
      },
      jumpPageToDataInfoChild(item){
        let activeMenus = item.replace(/\s/ig,'')
        this.$router.push({path: `/DataInfo/${activeMenus}`})
      },
      jumpPageToDataToolsChild(item){
        let getUserMenus = sessionStorage.getItem('userMenus')
        if(getUserMenus == null||getUserMenus == 'undefined'){
          this.$router.push({path: '/login'})
        }else {
          let userMenus = JSON.parse(getUserMenus)
          let activeMenus = item.replace(/\s/ig, '')
          if (activeMenus === '组更新') {
            activeMenus = 'GroupUpdate'
          }
          if (activeMenus === '服务状态更新') {
            activeMenus = 'ServiceStatusUpdate'
          }
          if (userMenus.length !== 0) {
            if (userMenus.indexOf(activeMenus) !== -1 || userMenus[0].toLowerCase() === 'all') {
              this.$router.push({path: `/DataTools/${activeMenus}`})
            } else {
              this.perssionDialog = true
            }
          } else {
            this.perssionDialog = true
          }
        }
      },
      jumpPageToReference(item){
        let activeMenus = item.replace(/\s/ig,'')
        this.$router.push({path: `/Reference/${activeMenus}`})
      },
      showPerssionInnerSystem(item) {
        let getUserMenus = sessionStorage.getItem('userMenus')
        if(getUserMenus == null||getUserMenus == 'undefined'){
          this.$router.push({path: '/login'})
        }else{
          let userMenus = JSON.parse(getUserMenus)
          let activeMenus = item.replace(/\s/ig,'')
          if(activeMenus === '客户画像'){
            activeMenus = 'CustomerProfile'
          }
          if(activeMenus === '产品检索'){
            activeMenus = 'ProductRetrieval'
          }
          if(activeMenus === '高级搜索'){
            activeMenus = 'AdvancedSearch'
          }
          if(userMenus.length !== 0){
            if(userMenus.indexOf(activeMenus) !== -1 || userMenus[0].toLowerCase() === 'all'){
              this.$router.push({path: `/InfoRetrieval/${activeMenus}`})
            }else{
              this.perssionDialog = true
            }
          }else{
            this.perssionDialog = true
          }
        }
      },
      showPerssionDashbord(item) {
        let getUserMenus = sessionStorage.getItem('userMenus')
        if(getUserMenus == null||getUserMenus == 'undefined'){
          this.$router.push({path: '/login'})
        }else {
          let userMenus = JSON.parse(getUserMenus)
          let activeMenus = item.replace(/\s/ig, '')
          if (userMenus.length !== 0) {
            if (userMenus.indexOf(activeMenus) !== -1 || userMenus[0].toLowerCase() === 'all') {
              this.$router.push({path: '/Dashboard/index'})
            } else {
              this.perssionDialog = true
            }
          } else {
            this.perssionDialog = true
          }
        }
      },
      // async showPerssionOuterSystem() {
      //   try {
      //     let res = await this.axios.post(`${this.testPort}/sso/sign`,{
      //       username: getUsername()
      //     })
      //     console.log(res);
      //     let sign = res.data.data.sign
      //     // removeToken()
      //       window.location.href = `${this.searchlightPort}sign=${sign}`
      //   }catch(error){
      //     console.log(error)
      //   }
      //   // this.searchlightDialog = true
      // },
      // 2018.12.19 Power Quester链接跳转更换
      async showPerssionOuterSystem() {
        window.open('https://devsl.lenovomm.com/demo/')
      },
      downloadDoc(){

      },
      showConstructionDialog() {
        this.constructionDialog = true
      },
      showConstructionDialog1(item) {
        let getUserMenus = sessionStorage.getItem('userMenus')
        if(getUserMenus == null||getUserMenus == 'undefined'){
          this.$router.push({path: '/login'})
        }else {
          let userMenus = JSON.parse(getUserMenus)
          let activeMenus = item.replace(/\s/ig, '')
          if (activeMenus === '招投标机会') {
            activeMenus = 'Bidding'
          }
          if(activeMenus === '客户画像') {
            activeMenus = 'CustomerProfile'
          }
          if (activeMenus === '客户流失预警') {
            activeMenus = 'CustomerLossWarning'
          }
          if (userMenus.length !== 0) {
            if (userMenus.indexOf(activeMenus) !== -1 || userMenus[0].toLowerCase() === 'all') {
              // 临时新增模块跳转处理
              if (activeMenus === 'Bidding') {
                this.$router.push({path: `/BusinessInsight/Bidding`})
              }else if(activeMenus === 'CustomerLossWarning'){
                this.$router.push({path: `/CustomerInsight/CustomerLossWarning`})
              }else if(activeMenus === 'CustomerProfile'){
                this.$router.push({path: `/InfoRetrieval/CustomerProfile`})
              }  else {
                this.constructionDialog = true
              }
            } else {
              this.constructionDialog = true
            }
          } else {
            this.constructionDialog = true
          }
        }
      },
      showConstructionDialog2(item) {
        let getUserMenus = sessionStorage.getItem('userMenus')
        if (getUserMenus == null || getUserMenus == 'undefined') {
          this.$router.push({path: '/login'})
        } else {
          let userMenus = JSON.parse(getUserMenus)
          let activeMenus = item.replace(/\s/ig, '')
          if (activeMenus === '产品配置') {
            activeMenus = 'ProductConfiguration'
          }
          if (activeMenus === '销售预测') {
            activeMenus = 'SalesPrediction'
          }
          if (userMenus.length !== 0) {
            if (userMenus.indexOf(activeMenus) !== -1 || userMenus[0].toLowerCase() === 'all') {
              // 临时新增模块跳转处理
              if (activeMenus === 'ProductConfiguration') {
                this.$router.push({path: `/BusinessInsight/ProductConfiguration`})
              }else if(activeMenus === 'SalesPrediction'){
                this.$router.push({path: `/BusinessInsight/SalesPrediction`})
              } else {
                this.constructionDialog = true
              }
            } else {
              this.constructionDialog = true
            }
          } else {
            this.constructionDialog = true
          }
        }
      }
    },
    computed: {
      ...mapGetters(['sidebar','language'])
    },
    watch: {
      language() {
        this.downloadPowerQuester()
      }
    },
    mounted() {
      this.downloadPowerQuester()
    },
    destroyed() {
      clearTimeout(this.timer)
    }
  }
</script>
